<!-- 告警列表组件 -->
<script setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount  } from 'vue'

// 告警信息
const scrollingItems = ref([
  {
    title: '网络告警001',
    detail: '001来自设备001在2024-04-15 03:18:17网络告警001',
    time: '2024-04-15 03:18:17'
  },
  {
    title: '网络告警002',
    detail: '002来自设备001在2024-04-15 03:18:17',
    time: '2024-04-15 03:18:17'
  },
  {
    title: '005',
    detail: '003002来自设备001在20242024-04-15 03:18:17',
    time: '2024-04-15 03:18:17'
  },
  {
    title: '004',
    detail: '004来自设备007在2024-04-15 03:18:17网络告警001',
    time: '2024-04-15 03:18:17'
  },
  {
    title: '005',
    detail: '0052024-04-15 03:18:17',
    time: '2024-04-15 03:18:17'
  }
])


</script>

<template>
  <div
    class="alarm-container"
  >
    <vue3-seamless-scroll
      :list="scrollingItems"
      :hover="true"
      :limitScrollNum="4"
      :duration="3000"
      :singleHeight="52">
        <div class="alarm-item" v-for="(item, index) in scrollingItems" :key="index">
          <div class="alarm-item-con">
            <div class="line-sx"></div>
            <div class="item-info">
              <p class="detail">{{ item.detail }}</p>
              <p class="name">{{ item.title }}</p>
            </div>
            <div class="item-time">{{ item.time }}</div>
          </div>
          <div class="line"></div>
        </div>
      </vue3-seamless-scroll>
  </div>
</template>

<style scoped lang="stylus">
.alarm-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  .alarm-item {
    width: 100%;
    height: 47px;
    margin-bottom: 7px;
    .alarm-item-con {
      width: 100%;
      height: 41px;
      display: flex;
      justify-content: space-between;
      .line-sx {
        height: 41px;
        width: 2px;
        background: rgba(255, 53, 53, 1);
      }
      .item-info {
        flex: 1;
        margin-left: 7px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
        min-width: 0;
        .detail {
          font-weight: 500;
          line-height: 20px;
          width: 90%;
          white-space: nowrap; /* 禁止换行 */
          overflow: hidden; /* 隐藏溢出部分 */
          text-overflow: ellipsis; /* 用省略号表示溢出部分 */
        }
        .name {
          font-weight: 300;
          line-height: 20px;
          width: 85%;
          white-space: nowrap; /* 禁止换行 */
          overflow: hidden; /* 隐藏溢出部分 */
          text-overflow: ellipsis; /* 用省略号表示溢出部分 */
        }
      }
      .item-time {
        margin-right: 4px;
        width: 65px;
        font-weight: 300;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.9)
      }
    }
    .line {
      height: 1px;
      width: 100%;
      background: rgba(231, 231, 231, 1);
      margin-top: 4px;
    }
  }
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
</style>